<template>
	<view class="confirm-step-box">
		<view class="confirm-item" v-for="(item, index) in stepList" :key="index">
			<view class="confirm-item-head">
				<view class="confirm-item-head-line"></view>
				<view class="confirm-item-head-text">
					<image v-if="item.type == 1 || item.type == 2" src="../../static/approval_user.png" mode=""></image>
					<image v-else src="../../static/approval_copy.png" mode=""></image>
				</view>
			</view>
			<view class="confirm-item-content">
				<view class="item-content-head">
					<view class="item-content-head-text">{{item.type == 1 || item.type == 2 ? '审批人' : '抄送人'}}</view>
				</view>
				<view v-if="item.type == 1">
					<view class="item-content-main">
						<view class="content-main-head">
							<view class="main-head-text">
								<view class="user-box">
									<image class="avatar" src="../../static/logo/logo_1024.png" mode=""></image>
									<view class="user-name">{{item.auditor.realname}}</view>
								</view>
							</view>
							<view class="main-head-more" v-if="item.audit.status != undefined">
								<text :style="{color: status[item.audit.status].color}">{{status[item.audit.status].title}}</text>
								<text style="margin-left: 10px">{{item.audit.update_time}}</text>
							</view>
						</view>
						<view class="user-content" v-if="item.audit.content && item.audit.content != ''">备注：{{item.audit.content}}</view>
						<view class="comment-box" v-for="(comment, index) in item.comments" :key="index">
							<view class="comment-head">
								<view class="comment-head-title"><text>{{comment.realname}}</text>添加了评论</view>
								<view class="comment-head-more">{{comment.create_time}}</view>
							</view>
							<view class="comment-head-content">评论内容：{{comment.content}}</view>
							<view class="comment-image-box">
								<image class="comment-image" v-for="(img, index) in comment.images" :key="index" :src="img" @click="previewImg(comment.images)"></image>
							</view>
						</view>
					</view>
				</view>
				<view v-if="item.type == 2">
					<view class="item-content-main">
						<view class="content-main-head">
							<view class="main-head-text" v-for="(user, index) in item.checker" :key="index">
								<view class="user-box">
									<image class="avatar" src="../../static/logo/logo_1024.png" mode=""></image>
									<view class="user-name">{{user.realname}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="item.type == 4">
					<view class="item-content-main">
						<view class="content-main-head">
							<view class="main-head-text" v-for="(user, index) in item.copy" :key="index">
								<view class="user-box">
									<image class="avatar" src="../../static/logo/logo_1024.png" mode=""></image>
									<view class="user-name">{{user.realname}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'steps',
		props: {
			stepList: {
				type: Array,
				default: []
			},
			moreBtn: {
				type: Boolean,
				default () {
					return true
				}
			}
		},
		data() {
			return {
				status: {
					0: {
						title: '待审核',
						color: '#999'
					},
					1: {
						title: '审核通过',
						color: '#409EFF'
					},
					2: {
						title: '审核驳回',
						color: 'red'
					},
					3: {
						title: '已转交',
						color: '#999'
					},
					13: {
						title: '已撤销',
						color: '#999'
					},
				},
			}
		},
		methods: {
			// 预览图片
			previewImg(e) {
				uni.previewImage({
					urls: e,
				});
			}
		}
	}
</script>

<style lang="less">
	.confirm-step-box {
		display: flex;
		flex-flow: column;
		margin-top: 12px;
		
		.confirm-item {
			position: relative;
			padding: 0 10px;
			display: flex;
			flex-shrink: 1;

			.confirm-item-head {
				position: relative;
				flex-grow: 0;

				.confirm-item-head-line {
					position: absolute;
					width: 2px;
					top: 0;
					bottom: 0;
					left: 11px;
					border-color: inherit;
					background-color: #c0c4cc;
				}

				.confirm-item-head-text {
					position: relative;
					z-index: 1;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					width: 24px;
					height: 24px;
					box-sizing: border-box;
					background: #fff;
					border: 2px solid #ebedf0;
					border-radius: 50%;
					font-size: 12px;

					image {
						height: 20px;
					}

				}

			}

			.confirm-item-content {
				padding-left: 10px;
				padding-bottom: 20px;
				white-space: normal;
				flex: 1;
				flex-grow: 1;
				text-align: left;

				.item-content-head {
					padding-bottom: 3px;
					display: flex;
					cursor: pointer;

					.item-content-head-text {
						width: 8rem;
						line-height: 24px;
						font-size: 14px;
						color: #333;
					}

					.item-content-head-more {
						flex: 1;
						text-align: end;
					}

				}

			}

			.item-content-main {
				
				.user-content{
					font-size: 12px;
					color: #333;
				}

				.content-main-head {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
				}

				.comment-box {
					padding: 8px 0;
					font-size: 12px;
					border-top: 1px solid #ebedf0;

					.comment-head {
						display: flex;
						justify-content: space-between;

						.comment-head-title {

							text {
								color: #409EFF;
							}
						}

						.comment-head-more {}

					}

					.comment-head-content {
						padding: 8px 0;
					}

					.comment-image-box {

						.comment-image {
							width: 40px;
							height: 40px;
						}

						.comment-image+.comment-image {
							margin-left: 5px;
						}

					}

				}

				.main-head-text {
					flex: 0 25%;
					line-height: 24px;
					font-size: 14px;
					color: #333;

					.user-box {
						text-align: left;
						font-size: 12px;

						.avatar {
							width: 30px;
							height: 30px;
						}

						.user-name {
							white-space: nowrap;
							width: 4rem;
							text-overflow: ellipsis;
							overflow: hidden;
						}

					}

				}

				.main-head-more {
					flex: 1;
					text-align: end;
					font-size: 12px;
				}

			}

		}

	}
</style>
